<script setup>
import { inject } from "vue";
import types from "./controls";
// import draggable from "vuedraggable/src/vuedraggable";
import draggable from "vuedraggable";
import NameIcon from "../NameIcon.vue";
import { randomWord, stringifyJson, parseJson } from "../utils";

const emit = defineEmits(['deleteItem', 'copyItem'])
const controls = defineModel("controls", {
  type: Array,
  required: true,
})
const data = inject("data")
const formProps = inject("formProps")

//#region 操作控件
//复制控件
function handleCopy(originControl) {
  let control = parseJson(stringifyJson(originControl));
  control.id = randomWord(false, 9);
  control.lock = false;
  controls.value.push(control);
  emit('copyItem', control)
}

//选中控件
function handleSelect(control) {
  data.activeControl = control;
  console.log('选中控件', data.activeControl)
}

//删除控件
function handleDelete(control, index) {
  if (data.activeControl != null && control.id == data.activeControl.id) {
    data.activeControl = null;
  }
  controls.value.splice(index, 1);
  emit('deleteItem', control)
}

</script>

<template>
  <draggable :list="controls" item-key="id" class="epdf-form-draggable" :sort="true"
    :group="{ name: 'com', pull: true, put: true }">

    <template #item="{ element, index }">
      <div @click.stop="handleSelect(element)" class="epdf-form-item-wrap"
        :class="{ 'is-selected': data.activeControl == element }"
        :style="{ width: (element.props.width * 100) / formProps.cols + '%' }">
        <el-form-item v-if="element.type != 'tab'" :prop="element.id"
          :label-width="element.props.showLabel ? element.props.labelWidth || formProps.labelWidth : '0'"
          :label="element.props.showLabel ? element.props.label : ' '" :rules="element.rules">
          <component :is="types[element.type].Renderer" :control="element">
            <template #action="{ data }">
              <slot name="action" :data="data"></slot>
            </template>
          </component>
        </el-form-item>
        <component v-if="element.type == 'tab'" :is="types[element.type].Renderer" :control="element" />
        <div class="opt" v-if="data.activeControl == element">
          <slot name="action" :data="element" class="move"></slot>
          <el-icon @click.stop="handleCopy(element)" v-if="!element.lock">
            <NameIcon name="copy"></NameIcon>
          </el-icon>
          <el-icon @click.stop="handleDelete(element, index)" v-if="!element.lock">
            <NameIcon name="delete"></NameIcon>
          </el-icon>
        </div>
      </div>
    </template>
  </draggable>
</template>

<style lang="less">
.epdf-form-draggable {
  // height: 500px;

  .epdf-form-item-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px dash black;
    padding-bottom: 18px;
    padding-top: 8px;

    .el-form-item {
      margin-bottom: 0
    }

    .opt {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 28px;
      line-height: 28px;
      padding: 0 4px;
      background-color: var(--el-color-primary);

      .el-icon:first-child {
        cursor: move;
      }

      .el-icon {
        color: white;
        margin-left: 8px;
        vertical-align: middle;
      }
    }



    &.is-selected {
      border: 1px solid var(--el-color-primary);
      outline: 1px solid var(--el-color-primary);
    }


  }

  .sortable-ghost {
    height: 10px;
    width: 100%;
    border-top: 5px solid var(--el-color-danger);
  }

}
</style>
